1
00:00:00,260 --> 00:00:00,950
All right.

2
00:00:00,950 --> 00:00:05,990
So in this lecture we're going to be creating the basic loading screen for our lobby.

3
00:00:05,990 --> 00:00:10,670
This loading screen will wait until the first screenshot of the game has been replicated to the client.

4
00:00:10,670 --> 00:00:14,780
And then it's also going to wait until all the scripts have been initialized on the client and on the

5
00:00:14,780 --> 00:00:15,350
server.

6
00:00:15,350 --> 00:00:19,070
Once everything has finished loading, then we're going to fade out the loading screen.

7
00:00:19,070 --> 00:00:22,490
So let's go ahead and take a look at what our loading screen looks like.

8
00:00:22,490 --> 00:00:26,150
So I'm going to copy this intro menu here or our loading screen.

9
00:00:26,150 --> 00:00:31,700
I'm going to put it inside of starter Guy and let me go ahead and enable UI visibility.

10
00:00:32,520 --> 00:00:34,830
So we're going to have this screen on here.

11
00:00:34,830 --> 00:00:36,210
It's going to give us a warning.

12
00:00:36,210 --> 00:00:39,990
You know this is a game with jumpscares flashing lights stuff like that.

13
00:00:39,990 --> 00:00:44,370
And then then we're also going to have uh, another little text down here that's going to tell us what

14
00:00:44,370 --> 00:00:44,880
we're loading.

15
00:00:44,880 --> 00:00:50,340
So it'll say loading or loading client or waiting on server and stuff like that.

16
00:00:50,340 --> 00:00:53,940
And of course we have our warning label and we have our warning text.

17
00:00:54,600 --> 00:00:58,950
So to get started, let's go ahead and open up our loading guy handler script.

18
00:00:59,250 --> 00:01:02,640
And inside of here we're going to need access to two services.

19
00:01:02,640 --> 00:01:04,590
One is going to be the player service.

20
00:01:04,590 --> 00:01:06,840
So we can get a reference to the local player.

21
00:01:08,880 --> 00:01:11,250
And then we're also going to get access to the tween service.

22
00:01:11,250 --> 00:01:15,030
That way we can fade out this guy when we're done loading the game.

23
00:01:18,460 --> 00:01:23,920
I'm going to have a variable to reference a clone of our guy.

24
00:01:23,920 --> 00:01:25,630
So we're going to call it clone guy.

25
00:01:25,630 --> 00:01:27,340
And it's going to be equal to the script.

26
00:01:27,340 --> 00:01:29,740
And we're going to get the child, which is the intro menu.

27
00:01:29,740 --> 00:01:31,510
And we're going to clone this guy.

28
00:01:32,300 --> 00:01:39,380
And then we're going to set the parent of this clone guy equal to the players dot local player, dot

29
00:01:39,380 --> 00:01:41,180
player guy folder.

30
00:01:41,240 --> 00:01:46,250
And then at the same time we're going to reference replicated first by doing script dot parent.

31
00:01:46,250 --> 00:01:50,420
And there's a function in there called remove default loading screen.

32
00:01:50,420 --> 00:01:54,920
So this will allow us to see our uh loading guy much faster.

33
00:01:54,920 --> 00:01:57,650
And we're removing the default Roblox loading screen.

34
00:01:58,860 --> 00:02:03,930
After that, we can also create a reference to the text label that is inside of our clone guy.

35
00:02:03,960 --> 00:02:08,790
So clone guy get the frame and then get the loading text.

36
00:02:09,030 --> 00:02:12,990
And then here I'm going to create some constants for the loading text.

37
00:02:12,990 --> 00:02:17,190
So we're going to have our standard loading text which will just say loading.

38
00:02:17,760 --> 00:02:21,240
We'll have some texts for waiting for the server.

39
00:02:21,240 --> 00:02:23,070
So we'll call it wait for server.

40
00:02:25,910 --> 00:02:28,340
And then we'll have some text for waiting on the client.

41
00:02:28,340 --> 00:02:33,470
So wait for client is equal to waiting for client.

42
00:02:34,410 --> 00:02:34,920
All right.

43
00:02:34,950 --> 00:02:41,220
Now, in this section, what I want to do is I want to use the task spawn function to spawn a function

44
00:02:41,220 --> 00:02:42,390
in a new thread.

45
00:02:42,390 --> 00:02:48,030
And what we're going to do is we're going to set the text labels text equal to the loading text.

46
00:02:48,210 --> 00:02:51,210
And then we're going to wait for 0.6 seconds.

47
00:02:52,210 --> 00:02:54,520
And then we're going to create a while loop.

48
00:02:54,520 --> 00:02:57,970
So what this while loop is going to check is whether or not the game is loaded.

49
00:02:57,970 --> 00:03:03,190
So while not game is loaded we're going to loop.

50
00:03:03,190 --> 00:03:09,730
So what we're going to do is we're going to set the text label dot text equal to uh itself.

51
00:03:10,910 --> 00:03:13,460
And we're going to concatenate it with a dot.

52
00:03:13,460 --> 00:03:15,710
So we get the, you know, dot dot dot.

53
00:03:15,740 --> 00:03:16,490
When it's loading.

54
00:03:16,490 --> 00:03:19,400
So our UI should look something like this.

55
00:03:19,400 --> 00:03:20,390
Loading.

56
00:03:20,390 --> 00:03:24,440
And then 0.6 seconds it adds a dot and then another dot and then another dot.

57
00:03:24,440 --> 00:03:28,850
And then once it reaches those three dots then it resets it back to that and it continues looping.

58
00:03:31,030 --> 00:03:36,670
So that means I'm going to have to add a check at the beginning here to see if the text label dot text

59
00:03:36,670 --> 00:03:42,160
is equal to the loading text, and concatenate it with three periods.

60
00:03:42,160 --> 00:03:48,610
So if our text is equal to that, then we're going to set the text label dot text back to the loading

61
00:03:48,640 --> 00:03:49,300
text.

62
00:03:49,300 --> 00:03:51,880
And then we're going to wait for 0.6 seconds.

63
00:03:53,220 --> 00:03:57,060
And then we can wait for 0.6 seconds down here as well.

64
00:03:58,200 --> 00:04:00,420
And that's all we need to do for this while loop.

65
00:04:00,420 --> 00:04:05,340
And the reason I'm spawning it in another thread is because I'm going to put an if statement down here.

66
00:04:05,340 --> 00:04:12,930
So if not game is loaded then we're going to wait for the game to load.

67
00:04:13,440 --> 00:04:23,640
So the next thing I want to check is let's say the workspace get attribute server loaded is nil or false.

68
00:04:23,640 --> 00:04:26,160
So let's say the server hasn't loaded yet.

69
00:04:26,160 --> 00:04:32,790
If the server hasn't loaded then we need to set the text label dot text equal to wait for the server.

70
00:04:32,790 --> 00:04:36,360
And then we can basically just do the exact same thing here as well.

71
00:04:36,360 --> 00:04:43,380
But instead we're just going to copy all this text and replace it from our loading text.

72
00:04:43,380 --> 00:04:46,890
And then I'm going to basically do the exact same thing down here again.

73
00:04:46,890 --> 00:04:50,790
But this time we're going to check to see whether or not the client has been loaded.

74
00:04:50,790 --> 00:04:56,190
So if not client loaded then we're going to loop here until that attribute has been changed.

75
00:04:56,190 --> 00:04:57,630
So actually we need to change that here.

76
00:04:57,630 --> 00:04:58,050
As well.

77
00:04:58,050 --> 00:04:58,620
So if.

78
00:04:59,190 --> 00:05:04,920
So while not workspace, get attribute server loaded.

79
00:05:04,920 --> 00:05:07,740
And then down here we're going to do it for the client.

80
00:05:07,740 --> 00:05:10,080
So all not client is loaded.

81
00:05:10,080 --> 00:05:14,190
Then we need to change this text to wait for client.

82
00:05:14,850 --> 00:05:17,340
Copy that and do it here as well.

83
00:05:17,490 --> 00:05:23,040
And then once we have waited for the game to load, we've successfully verified the server is loaded

84
00:05:23,040 --> 00:05:26,010
and then we have successfully verified that the client has loaded.

85
00:05:26,010 --> 00:05:28,620
Then we can go ahead and fade out our loading screen.

86
00:05:28,620 --> 00:05:33,810
So what I'm going to do is I'm going to loop through every single UI element in our UI.

87
00:05:33,840 --> 00:05:38,400
So every single element in Ipairs clone GUI.

88
00:05:38,400 --> 00:05:40,710
And we're just going to get all of the descendants.

89
00:05:40,950 --> 00:05:46,680
And what we're going to do is we're going to check if this element is a frame.

90
00:05:46,680 --> 00:05:51,030
So if it's a frame, then we're going to use the tween service and create a new tween.

91
00:05:51,030 --> 00:05:52,530
On this element.

92
00:05:53,190 --> 00:05:57,570
We could do tween info and fade it out in like 0.5 seconds.

93
00:05:57,720 --> 00:06:03,900
And we want to set the background transparency equal to one.

94
00:06:03,900 --> 00:06:05,700
And then we can just play this tween.

95
00:06:08,260 --> 00:06:08,770
Else.

96
00:06:08,770 --> 00:06:17,590
If this element is, let's say a text label, text label, then instead we need to change the text transparency

97
00:06:17,590 --> 00:06:20,290
and not the background transparency of the text.

98
00:06:20,290 --> 00:06:25,780
So we can just copy this and then change this to the text transparency.

99
00:06:26,140 --> 00:06:31,030
And then once we have loop through all those elements and started tweening them, then we're going to

100
00:06:31,030 --> 00:06:34,210
just wait for 0.5 seconds, which is the duration of the tween.

101
00:06:34,210 --> 00:06:40,450
And then once that's done, we can go ahead and destroy this clone GUI from our UI folder, and then

102
00:06:40,450 --> 00:06:45,130
we can just destroy the script itself as well, because we aren't going to use it anymore.

103
00:06:45,700 --> 00:06:48,010
And that should be our loading guy complete.

104
00:06:48,010 --> 00:06:49,930
So let's go ahead and test it out.

105
00:06:49,930 --> 00:06:51,730
We're going to hit play up here.

106
00:06:52,410 --> 00:06:54,510
And we should see our loading screen.

107
00:06:56,320 --> 00:07:00,670
Or we didn't because apparently the server loaded way too fast.

108
00:07:00,970 --> 00:07:06,010
So let me see if there's a way I could try to slow it down a little bit.

109
00:07:06,010 --> 00:07:09,490
Let me go ahead and go into our start script.

110
00:07:10,090 --> 00:07:15,520
And what I'm going to do is I'm actually going to wait here for like, 10s.

111
00:07:15,520 --> 00:07:18,040
That way we can get the chance to see our loading screen.

112
00:07:18,820 --> 00:07:19,660
So let's try it.

113
00:07:20,230 --> 00:07:21,850
So let's try this again.

114
00:07:22,750 --> 00:07:23,470
There we go.

115
00:07:23,500 --> 00:07:26,560
We are waiting for the client we're currently loading.

116
00:07:28,120 --> 00:07:31,870
And then once the client has loaded everything, then this guy should fade out.

117
00:07:34,430 --> 00:07:35,420
And there we go.

118
00:07:35,420 --> 00:07:38,900
Our joy has faded out because the client has finished loading.

119
00:07:39,380 --> 00:07:43,010
And that's how you can create a basic loading screen for your games.

120
00:07:43,040 --> 00:07:46,490
We're also going to be using this loading screen in the other place for our game.

121
00:07:46,490 --> 00:07:50,870
And we're also going to add a little bit extra feature, where this loading screen will also wait until

122
00:07:50,870 --> 00:07:53,300
all the other players have loaded in the game as well.

123
00:07:53,660 --> 00:07:55,880
Otherwise, see you in the next lecture.